<template>
  <div class="login">
    <van-nav-bar title="注册" left-arrow @click-left="$router.back()" />
    <!-- 手机号 -->
    <van-field v-model="phone" focus center clearable type="number" label="手机号" left-icon="phone-o" placeholder="请输入手机号" required maxlength="11">
      <template #button>
        <van-button :disabled="flag" size="small" type="primary" @click="getCode">{{ flag ? `已发送${computeTime}s` : '获取验证码' }}</van-button>
      </template>
    </van-field>
    <!-- 验证码 -->
    <van-field required v-model="VerificationCode" type="number" label="验证码" left-icon="cluster-o" placeholder="请输入验证码" />
    <!-- 密码 -->
    <van-field v-model="password" type="password" label="密码" left-icon="eye-o" placeholder="密码8-16位" maxlength="16" minlength="8" />
    <!-- 提交按钮 -->
    <div class="btn">
      <van-button type="primary" size="large" class="btn1" @click.prevent="submit">立即注册</van-button>
      <van-button type="primary" size="large" class="btn2" to="/login">已有帐号，直接登录</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      phone: '',
      password: '',
      VerificationCode: '', //获取到的验证码
      computeTime: 60, //关于验证码发送的倒计时样式
      timer: null
    }
  },
  methods: {
    //异步获取短信验证码
    getCode() {
      if (!this.phone || this.phone.length !== 11) return alert('请输入电话号码或者手机号格式有误！')
      let users = JSON.parse(localStorage.getItem('users')) || []
      // 判断用户是否存在
      if (users.filter((item) => item.phone == this.phone).length > 0) return alert('该手机号已注册！')
      this.flag = true
      //开始倒计时
      this.timer = setInterval(() => {
        this.computeTime--
        //如果数值小于0， 那么可以停止倒计时
        if (this.computeTime <= 0) {
          // 验证码失效
          localStorage.removeItem('verify')
          clearInterval(this.timer)
          this.flag = false
        }
      }, 1000)
      setTimeout(() => {
        // 随机生成6位数字验证码
        for (let i = 0; i < 6; i++) {
          this.VerificationCode += Math.floor(Math.random() * 10)
        }
        //将验证码和电话号码进行保存
        let verifyCode = {
          phone: this.phone,
          verify: this.VerificationCode
        }
        localStorage.setItem('verify', JSON.stringify(verifyCode))
      }, Math.floor(Math.random() * (6 - 2) + 2) * 1000)
    },
    //提交·
    submit() {
      const userVerify = JSON.parse(localStorage.getItem('verify'))
      // 验证是否过期
      if (!userVerify) return alert('验证码已过期！')
      // 电话号码是否正确
      if (!this.phone || this.phone.length !== 11) return alert('电话号码不能为空或者格式不正确！')
      // 电话号码是否正确
      if (userVerify.phone !== this.phone) return alert('电话号码错误！')
      // 验证码是否正确
      if (userVerify.verify !== this.VerificationCode) return alert('验证码不正确！')
      // 电话号码格式验证
      if (!/^1[3-9]\d{9}$/.test(this.phone)) return alert('电话号码格式不正确！')
      // 是否输入密码
      if (!this.password) return alert('密码不能为空！')
      if (this.password.length > 16 || this.password.length < 6) return alert('密码长度不正确！')
      // 密码为6-16位的数字字母组合
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.password)) return alert('密码必须为数字和字母的组合！')
      // 全部通过就用户信息保存在本地
      let users = JSON.parse(localStorage.getItem('users')) || []
      // 判断用户是否存在
      if (users.filter((item) => item.phone == this.phone).length > 0) return alert('该手机号已注册！')
      let user = {
        phone: this.phone,
        password: this.password
      }
      users.push(user)
      localStorage.setItem('users', JSON.stringify(users))
      this.$toast.success('注册成功！')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  /deep/.van-nav-bar {
    background-color: #f4f4f4;
  }

  /deep/.van-icon {
    color: #323232;
  }

  .van-button--large {
    margin-top: 20px;
  }
  .btn1 {
    background-color: #dddddd;
    border: 1px solid #dddddd;
    border-radius: 15px;
  }

  .btn2 {
    background-color: #ffdd74;
    border: 1px solid #ffdd74;
    border-radius: 15px;
  }
  .btn {
    padding: 0 15px;
  }
}
</style>
